<template>
    <div :class='$style.chart'>
        <v-chart :option='option' />
    </div>
</template>

<script lang='ts' setup>
    import { computed } from "vue"

    const { chartData } = defineProps<{
        chartData : any
    }>()

    const option = computed(() => {
        let option:any = {
            ...chartData,
            // dataZoom: [
            //     {
            //         type: 'slider',
            //         show: true,
            //         xAxisIndex: [0],
            //         start: 1,
            //         end: 35
            //     }
            // ],
        }

        if(!option.grid) {
            option.grid = {
                top : '50px',
                right : '30px',
                bottom : '30px',
            }
        }

        if(option.legend) {
            option.legend.orient = 'horizontal'
            option.legend.top = '40px'
            // if(option.series.length == 1) {
            //     option.grid.top = '120px'
            // }
        }

        return option
    })
</script>


<style scoped module lang='scss'>
    .chart{
        height: 600px;
    }
</style>